<!--
  -    Copyright (c) 2018-2025, gewu All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the gewucn.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: gewu
  -->
<template>
  <div class="execution">
    <el-row :gutter="10">
      <el-col :span="16">
        <el-card class="box-card btn-search">
          <div slot="header" class="clearfix">
            <div class="btn-box">
              <el-button type="info" icon="el-icon-refresh-left"></el-button>
              <el-button
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="addModel"
                >新增</el-button
              >
            </div>
            <div class="icon-box">
              <i class="el-icon-search"></i>
              <i class="el-icon-refresh"></i>
              <i class="el-icon-goods"></i>
              <i class="el-icon-setting"></i>
              <i class="icon-zuixiaohua" />
            </div>
          </div>
          <div>
            <el-form ref="queryForm" :inline="true" label-width="68px">
              <el-form-item label="系统选择">
                <el-select
                  placeholder="系统选择"
                  clearable
                  style="width: 120px"
                  v-model="system"
                >
                </el-select>
              </el-form-item>
              <el-form-item label="状态筛选">
                <el-select
                  placeholder="状态筛选"
                  clearable
                  style="width: 120px"
                  v-model="status"
                >
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini"
                  >搜索</el-button
                >
                <el-button icon="el-icon-refresh" size="mini">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <basic-container>
          <div style="margin-bottom: 20px">
            <span> 任务类别 </span>
            <span style="font-size: 12px; color: #999"
              >所有子系统任务汇聚查看，也可以前往各子系统查看详情</span
            >
          </div>

          <avue-crud
            ref="crud"
            :page.sync="page"
            :data="tableData"
            :option="tableOption"
          >
            <template slot-scope="scope" slot="menu">
              <el-button
                type="text"
                icon="el-icon-view"
                @click="handleTable(scope.row, scope.index)"
                >详情
              </el-button>
            </template>
          </avue-crud>
        </basic-container>
      </el-col>

      <el-col :span="8">
        <el-card class="box-card">
          <div>
            <el-row>
              <el-col :span="8">
                <h5 style="margin-top: 0">
                  <span class="titleAdd"></span>总览 | Task
                </h5>
              </el-col>
              <el-col :span="16">
                <span style="font-size:9px;color:#B6B6B6">
                  <i
                    class="icon-gwshijian"
                    style="font-size:9px"
                  ></i>
                  上次登录 2020-03-01 17:23 1天前</span
                >
              </el-col>
            </el-row>
          </div>
          <el-row :gutter="15" class="info">
            <el-col :span="8">
              <div class="border">
                <div class="email common">
                  <span>
                    <img src="/images/email.png" alt="" />
                  </span>
                </div>
                <div>邮件</div>
                <div>
                  <span>48</span>
                  email
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="border">
                <div class="tags common">
                  <span>
                    <img src="/images/tags.png" alt="" />
                  </span>
                </div>
                <div>任务</div>
                <div>
                  <span>6</span>
                  task
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="border">
                <div class="message common">
                  <span>
                    <img src="/images/message.png" alt="" />
                  </span>
                </div>
                <div>消息</div>
                <div>
                  <span>8</span>
                  News
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="taskNumber">
           <!-- <span class="titleAdd toolBar"></span>工具栏 | toolbar -->
            <span>今日任务总数:</span>
            <span >28</span>
            <span>Task</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-drawer
      class="drawerStyle"
      :visible.sync="projectDetail"
      direction="rtl"
      size="50%"
      append-to-body
    >
      <div class="drawer">
        <div>
          <span>项目已用时</span>
          <span>
            <i class="el-icon-refresh" style="float: right"></i>
          </span>
        </div>
        <div style="text-align: center">
          <div>
            <span
              v-for="(item, key) in weekdays"
              :key="key"
              class="nomalClass"
              :class="{ activeClass: choosedSpan === key }"
              @click="chooseTime(key)"
              >{{ item }}</span
            >
          </div>
          <div class="time">
            <span>09:</span>
            <span>30:</span>
            <span>40</span>
          </div>
          <div class="kedu">
            <span>hours</span>
            <span>minutes</span>
            <span>seconds</span>
          </div>
        </div>
      </div>
      <div class="liner"></div>
      <div class="card">
        <div class="listStyle">
          <i class="el-icon-date" style="font-size: 15px"></i
          ><span style="font-size: 15px">注塑机维修</span>
        </div>
        <div class="listStyle">
          <i class="icon-gwdian-yxz"></i><span>我的任务</span>
        </div>
        <div class="listStyle">
          <i class="el-icon-bell"></i><span>02月07日 周五 13:00 - 13:35 </span>
        </div>
        <div class="listStyle">
          <i class="icon-gwshijian"></i><span>15分钟前提醒</span>
        </div>
        <div class="listStyle">
          <i class="el-icon-price-tag"></i
          ><span
            >冲压机机机器上油，测试液压，测试油压，测试震动系数。冲压机机机器上油，测试液压，测试油
            压，测试震动系数</span
          >
        </div>
        <div class="listStyle">
          <i class="el-icon-user-solid"></i><span>项目参与人员</span>
        </div>
        <el-table :data="gridData">
          <el-table-column property="date" label="编号"></el-table-column>
          <el-table-column property="name" label="姓名"></el-table-column>
          <el-table-column property="address" label="电话"></el-table-column>
          <el-table-column
            property="address"
            label="个人任务状态"
          ></el-table-column>
          <el-table-column property="address" label="时间"></el-table-column>
        </el-table>
        <div class="listStyle">
          <i class="el-icon-notebook-2"></i>
          <span>
            任务提交
            <span class="compete">已完成</span>
          </span>
        </div>
      </div>
      <!--  -->
    </el-drawer>
  </div>
</template>

<script>
import { tableOption } from "@/const/crud/gwcloud/list";

export default {
  name: "TableRole",
  data() {
    return {
      tableOption: tableOption,
      choosedSpan: 0,
      tableData: [{}],
      status: "",
      system: "",
      gridData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      projectDetail: false,
      weekdays: ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"],
    };
  },
  methods: {
    handleTable(m, n) {
      this.projectDetail = true;
    },
    chooseTime(index) {
      this.choosedSpan = index;
    },
    addModel() {
      this.$emit("changeStatus", false);
    },
  },
};
</script>
<style scoped lang='scss'>
.nomalClass {
  background-color: #ccc;
  color: white;
  padding: 3px 5px;
  display: inline-block;
  margin: 10px 5px;
  border-radius: 2px;
  font-size: 15px;
  cursor: pointer;
}
.drawer {
  width: 60%;
  margin: 0 auto;
  .time {
    margin: 0;
    font-size: 50px;
    font-weight: 100;
    text-align: center;
  }
}
.time {
  span {
    display: inline-block;
    //  margin: 0 10px;
  }
}
.kedu {
  span {
    display: inline-block;
    text-align: center;
    width: 70px;
    font-size: 12px;
    color: #aaa;
  }
}
.liner {
  border-top: 1px solid #f2f2f2;
  width: 80%;
  margin: 20px auto;
}
::v-deep .drawerStyle {
  .el-drawer__header {
    margin-bottom: 0;
  }
}
::v-deep .card {
  padding: 10px 20px;
  font-size: 13px;
  .listStyle {
    display: flex;
    align-items: center;
  }
  span {
    color: #101010;
    margin: 10px 0;
    display: inline-block;
    width: 90%;
  }
  i {
    font-size: 12px;
    margin-right: 20px;
  }
}
.activeClass {
  background-color: #00b754;
}
.compete {
  color: #00b754;
}
.info {
  .border {
    border: 1px solid #e0def3;
    border-radius: 10px;
    cursor: pointer;
    div {
      color: #aaa6c8;
      margin: 10px 0;
      text-align: center;
      font-size: 14px;
      span {
        color: #352d7e;
        font-size: 20px;
        font-weight: bold;
      }
    }
    .iconStyle {
      text-align: right;
    }
    .contentStyle {
      text-align: left;
      div {
        text-align: left;
      }
    }
    .goto {
      line-height: 60px;
      display: block;
    }
  }
}
.titleAdd {
  width: 5px;
  height: 20px;
  background-color: #26ae61;
  display: inline-block;
  margin-right: 10px;
  vertical-align: bottom;
}
.toolBar{
  background-color: #FF7043;
}
.taskNumber{
  font-size: 10px;
}
</style>